<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>智慧社区-互动社区</title>

    <!-- Bootstrap -->
    <link href="<s:url value="/assets/front/css/bootstrap.min.css"></s:url>" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<s:url value="/assets/front/css/common.css"></s:url>" />
    <link rel="stylesheet" type="text/css" href="<s:url value="/assets/front/css/list.css"></s:url>"/>
    <link rel="stylesheet" href="<s:url value="/ueditor/themes/default/css/ueditor.css"></s:url>" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<%@include file="/WEB-INF/views/front/include/menu.jsp"%>
<div class="bar-top">
    <div class="cover bg1" >
        <div class="mask"></div>
    </div>
    <div class="intro">
        <!--<div class="bar-logo" >
            <img src="" >
        </div>-->
        <div class="bar-info">
            <div class="title">互动交流社区</div>
            <div class="desc ellipsis">智慧社区</div>
        </div>
    </div>
</div>

<div class="container post-wrap">

    <div class="post-top" >
        <div class="info-data">
            <span>话题</span>
            <span class="num">0</span>
        </div>
        <a href="#push"><div class="btn-post" >发表</div></a>
    </div>
    <ul class="post-list" >

    </ul>

    <div class="" >
        <ul class="pg" >
            <li class="pg_prev pg_empty" ><span>上一页</span></li>
            <li class="pg_menu" >
						<span class="pg_num" >
							<span id="page_num">第1页</span>
							<span class="pg_selector" ></span>
						</span>
                <div class="pg_numlist_wrap"  style="top: -300px; height: 300px; visibility: hidden;">
                    <ul class="pg_numlist clearfix"  style="top: 0px;">

                    </ul>
                    <div class="pg_slider" >
                        <div class="pg_bar"  style="height: 35.1724px; top: 0px;"></div>
                    </div>
                    <div ></div>
                </div>
            </li>
            <li class="pg_next" ><span>下一页</span></li>
        </ul>
    </div>

    <div class="ui-poster-wrap">
        <a name="push"></a>
        <div class="ui-poster" >
            <div ></div>
            <div class="poster-title" ><input placeholder="标题" class="title" id="title" ></div>
            <div class="editor-wrap" >
                <textarea id="container"></textarea>
            </div>
            <div class="poster-footer" ><span ></span>
                <div class="btn-area" >
                    <button class="btn-submit" id="create" >发表</button>
                </div>
                <div class="poster-tip" ></div>
                <div ></div>
            </div>
        </div>
    </div>

</div>
<%@include file="/WEB-INF/views/front/include/footer.jsp"%>
<script type="text/plain" id="upload_ue"></script>
<script type="text/javascript"  src="<s:url value="/ueditor/ueditor.config.js"></s:url>"></script>
<script type="text/javascript"  src="<s:url value="/ueditor/ueditor.all.min.js"></s:url>" ></script>
<script type="text/javascript">

    var newCurrentPage = 1;
    var pageCount = 1;

    var ue = UE.getEditor('container', {
        initialFrameHeight:300,
        autoHeightEnabled:true
    });

    $('#create').click(function () {
        var topicContent = ue.getContent();
        var topicName = $('#title').val();
        $.ajax({
            type : "post",
            url : "${pageContext.request.contextPath}/topic/pass/create",
            data : {"topicContent": topicContent ,"topicName": topicName },
            dataType : "json",
            success : function(datas) {
                if(datas.code == '200'){
//                    alert("发布成功");
                    location.reload();
                } else if(datas.code == '500') {
                    alert(datas.message);
                }else {
                    location.href = "${pageContext.request.contextPath}/login";
                }
            },
            error :function(xhr) {
                location.href = "${pageContext.request.contextPath}/login";
            }
        });
    });

    $(function () {
        getlist({
            currentPage : 1
        });
        getTopicNumber();
    });

    /**
     *  话题列表
      * @param obj
     */
   function getlist(obj){
        obj.pageSize = obj.pageSize == null ? 5 : obj.pageSize;
        obj.currentPage = obj.currentPage == null ? 1 : obj.currentPage;
        $.ajax({
            type : "post",
            url : "${pageContext.request.contextPath}/topic/list",
            data : {"paging.pageSize": obj.pageSize ,"paging.currentPage": obj.currentPage },
            dataType : "json",
            success : function(datas) {
                if ( datas.code =='200'){
                    var data = datas.data;
                    var paging = data.paging;
                    var list  = data.list;
                    setPageInfo(paging);
                    var html ='';
                    $.each(data.list, function(index,element) {
                        html += getHtmlLi(element);
                    });
                    $('.post-list').empty();
                    $('.post-list').append(html);

                }
            },
            error :function(xhr) {

            }
        });

   }

   function getHtmlLi(topic) {

       var htmlLi = '<li class="post" >'
       +'<a href="${pageContext.request.contextPath}/topic/'+topic.sysId +'/detail" target="_blank" >'
             +'<div class="title" >'
                 +'<span ></span>'
                 +'<span >' + (topic.topicName == undefined ? '': topic.topicName)  + '</span>'
             +'</div>'
                 +'<div >'
                  +'<div class="content" >'
                    +'<div class="desc" >'
                   +'<span >' + topic.topicContent + '</span>'
                   +'</div>'
                   +'<noscript ></noscript>'
                   +'</div>'
                   +'<div class="time" >更新时间: ' + topic.updDate + ' '+topic.updTime + '</div>'
                   +'</div>'
                   +'</a>'
                   +'<div class="post-right" >'
                   +'<div class="post-user ellipsis" >'
                   +'<i class="user_img"></i>'
                   + topic.userName
                  +'</div>'
                  +'<div class="view-num" >'
                  +'<i class="user_read"></i>' + topic.clickNumber + ''
                  +'</div>'
                  +'<div class="comment-num" >'
                  +'<i class="user_commonent"></i>' + topic.commentNumber + ''
                  +'</div>'
                  +'</div>'
                  +'</li>';
        return htmlLi;
   }

   function getTopicNumber() {
       $.ajax({
           type : "get",
           url : "${pageContext.request.contextPath}/topic/number",
           dataType : "json",
           success : function(datas) {
               if ( datas.code =='200'){
                   var number = datas.data;
                   $('.num').html(number);
               }
           },
           error :function(xhr) {

           }
       });
   }
    /**
     * 下一页
     */
   function nextPage() {
       var  next_page = (newCurrentPage + 1) > pageCount ? pageCount : (newCurrentPage + 1);
        getlist({
            currentPage: next_page
        });
   }
    /**
     * 上一页
     */
   function prevPage() {
        var  prev_page = (newCurrentPage - 1) < 1 ? 1 : (newCurrentPage - 1) ;
        getlist({
            currentPage: prev_page
        });

   }
    /**
     * 设置分页信息
     * @param paging
     */
   function setPageInfo(paging) {
       pageCount = paging.pageCount;
       newCurrentPage = paging.currentPage;
       $('#page_num').html('第' + newCurrentPage + '页');
       if (newCurrentPage == 1){
           $('.pg_prev').addClass('pg_empty');
           $(".pg_prev").unbind("click",prevPage);
       }else {
           $('.pg_prev').removeClass('pg_empty');
           $(".pg_prev").bind("click",prevPage);
       }
       if (newCurrentPage == pageCount){
           $('.pg_next').addClass('pg_empty');
           $(".pg_next").unbind("click",nextPage);
       }else {
           $(".pg_next").bind("click",nextPage);
           $('.pg_next').removeClass('pg_empty');
       }
       var lis = '';
       for (var i = 1 ; i <= pageCount; i++ ){
            if (newCurrentPage == i){
                lis += '<li class="active"><span >第'+ i +'页</span></li>';
            } else {
                lis += '<li onclick="gotoPage(' + i + ')"><span>第'+ i + '页</span></li>';
            }
       }

       if(pageCount < 10){

           $('.pg_numlist_wrap').css('top', '-' + (30 * pageCount) + 'px');
           $('.pg_numlist_wrap').css('height', '' + (30 * pageCount) + 'px');
       }else {
           $('.pg_numlist_wrap').css('top', '-300px');
           $('.pg_numlist_wrap').css('height', '300px');
       }

       $('.pg_numlist').empty();
       $('.pg_numlist').append(lis);
   }

   function gotoPage(pageNumber) {
       getlist({
           currentPage: pageNumber
       });
       $('.pg_numlist_wrap').css('visibility', 'hidden');
   }

</script>
</body>
</html>
